<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="handleJump" data-type="BACK">
					<image class="title_bar_left_icon" :src='STATIC_URL+"5.png"'></image>
				</view>
				<view class="title_bar_center">
					<text >账号资料</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="information_info">
			<view class="information">
				<view class="information_item">
					<view class="item_left">头像</view>
					<view class="item_right">
						<image v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
						<image v-else :src='STATIC_URL+"47.png"' mode="aspectFill"></image>
					</view>
				</view>
				<view class="information_item">
					<view class="item_left">姓名</view>
					<view class="item_right_name">
						<input v-model="userInfo.name" type="text" placeholder="请输入昵称" placeholder-style="font-size:30rpx;" :disabled="true">
					</view>
				</view>
				<!-- <view class="information_item">
					<view class="item_left">性别</view>
					<view class="item_right_sex">
						<view class="sex_item" @tap.stop="selectSex(1)">
							<image v-if="userInfo.gender == 1" src="./static/2.png" mode=""></image>
							<image v-else src="./static/1.png" mode=""></image>
							<text>男</text>
						</view>
						<view class="sex_item"@tap.stop="selectSex(2)">
							<image v-if="userInfo.gender == 2" src="./static/2.png" mode=""></image>
							<image v-else src="./static/1.png" mode=""></image>
							<text>女</text>
						</view>
					</view>
				</view> -->
				<view class="information_item no_border">
					<view class="item_left">联系电话</view>
					<view class="item_right_name">
						<input v-model="userInfo.phone" :disabled="true" type="text" placeholder="请输入联系电话" placeholder-style="font-size:30rpx;">
					</view>
				</view>
			</view>
		</view>
		<view class="save_btn" @tap.stop="out_show=true">退出登录</view>
		<!-- <u-picker v-model="show" mode="time" title="选择生日" :safe-area-inset-bottom="true" @confirm="confirm"></u-picker> -->
		<!--选择日期开始 -->
		<x-picker ref="benbenWritePickerCodepicker3" :visible.sync="show"
			:value.sync='userInfo.birthday' mode='date' :picker-height='88' :current='true' :mask-show='true'
			fields='day' :timeout='true' start-year='1950-01-01' end-year='现在'>
			<template #picker-header>
				<view class='myInformation_picker3_0'>
					<text @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
					<text>选择生日</text>
					<text class='myInformation_picker3_0_c2'
						@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
				</view>
			</template>
		</x-picker>
		
		<u-modal v-model="out_show" content="确定退出登录吗？" :show-cancel-button="true" confirm-color="#41AF36" @confirm="confirmOut"></u-modal>
	</view>
</template>

<script>
	import xPicker from './components/x-picker/benben-picker.vue'
	export default {
		data() {
			return {
				username: "",
				show: false,
				out_show: false,
				userInfo: {},
			}
		},
		components: {
			xPicker
		},
		onLoad() {
			this.getUserInfo();
			/**
			 * @description 监听监听上传头像事件
			 */
			uni.$on("uPicCropper", (path) => {
				// console.log(path);
				this.uploadUserImg(path);
			});
		},
		onUnload() {
			uni.$off('uPicCropper');
		},
		methods: {
			// 获取用户资料  postUserInfo
			getUserInfo() {
				this.$api.post(global.apiUrls.glyUser, {
					
				}).then(res => {
					// console.log(res);
					if (res.data.code == 200) {
						this.userInfo = res.data.data;
					} else {
						this.$message.info(res.data.message);
					}
				})
			},
			selectSex(sex) {
				this.userInfo.gender = sex;
			},
			confirm(e) {
				// console.log(e);
				this.userInfo.birthday = e.year + '-' + e.month + '-' + e.day;
			},
			
			// 编辑图片
			edit() {
				if (!this.userInfo.nickname) {
					this.$message.info('请输入昵称');
					return;
				}
				this.$api.post(global.apiUrls.postEdituser, {
					avatar_id: this.userInfo.avatar_id,
					nickname: this.userInfo.nickname,
					gender: this.userInfo.gender,
					birthday: this.userInfo.birthday
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
			},
			// 选择头像
			chooseImage() {
				let _this = this;
				uni.showActionSheet({
					itemList: ["修改头像", "拍照", "从手机相册选择"],
					success: function(res) {
						console.log("选中了第" + (res.tapIndex + 1) + "个按钮");
						if (res.tapIndex == 0) {
							let img = _this.userInfo.avatar;
							uni.navigateTo({
								url: '/pages/my/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType=jpg&myImgUrl=' +
									img,
								animationDuration: 0,
							});
						} else if (res.tapIndex == 1) {
							uni.chooseImage({
								count: 1,
								sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
								sourceType: ["camera"], // 可以指定来源是相册还是相机，默认二者都有
								success: (res) => {
									// 跳转到图片裁切页面
									uni.navigateTo({
										url: '/pages/my/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType=jpg&myImgUrl=' +
											res.tempFilePaths[0],
										animationDuration: 0,
									});
								},
							});
						} else {
							uni.chooseImage({
								count: 1,
								sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
								sourceType: ["album"], // 可以指定来源是相册还是相机，默认二者都有
								success: (res) => {
									// 跳转到图片裁切页面
									uni.navigateTo({
										url: `/pages/my/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType=jpg&myImgUrl=${res.tempFilePaths[0]}`,
										animationDuration: 0,
									});
								},
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					},
				});
			},
			uploadUserImg(bold) {
				let _this = this;
				// 开始上传
				uni.showLoading({
					title: "上传中...",
					mask: true
				});
				uni.uploadFile({
					url: global.API_BASE_URL + global.apiUrls.postUpload,
					filePath: bold,
					header: {
					  'user-token': global.token
					},
					name: 'file',
					formData: {
						'dir': 'images'
					},
					success: function(uploadFileRes) {
						uni.hideLoading();
						if (uploadFileRes.statusCode == 200) {
							let resData = JSON.parse(uploadFileRes.data);
							console.log(resData)
							if (resData.code == 1) {
								_this.userInfo.avatar = resData.data.path;
								_this.userInfo.avatar_id = resData.data.id;
							}
						}
					},
					fail: function (error) {
						uni.hideLoading();
						_this.$message.info('上传失败，请稍后再试');
					}
				});
			},
			confirmOut() {
				this.out_show = false;
				this.$store.commit('logout');
				this.$message.info('已退出');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 800)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.myInformation_picker3_0_c2 {
			color: #0278FC;
		}
		
		.myInformation_picker3_0 {
			border-bottom: 1px solid #eee;
			background: #fff;
			padding: 0rpx 32rpx 0rpx 32rpx;
			line-height: 88rpx;
			border-radius: 25rpx 25rpx 0rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
					.title_bar_left_icon {
						width: 18rpx;
						height: 32rpx;
					}
				}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {
					width: 50rpx;
				}
			}
		}
		.information_info {
			padding: 30rpx;
			.information {
				background: #fff;
				border-radius: 20rpx;
				padding: 0 30rpx;
				.information_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #eee;
					padding: 28rpx 0;
					.item_left {
						font-size: 30rpx;
						// width: 70rpx;
					}
					.item_right {
						width: 88rpx;
						height: 88rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.item_right_name {
						flex: 1;
						display: flex;
						align-items: center;
						input {
							text-align: right;
							width: 100%;
						}
						.item_right_name_icon {
							margin-left: 8rpx;
						}
					}
					.item_right_sex {
						display: flex;
						.sex_item {
							display: flex;
							align-items: center;
							margin-left: 90rpx;
							image {
								width: 26rpx;
								height: 26rpx;
								margin-right: 10rpx;
							}
						}
					}
				}
				.no_border {
					border-bottom: 1rpx solid transparent;
				}
			}
		}
		.save_btn {
			width: 686rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #eee;
			background: #fff;
			border-radius: 42rpx;
			text-align: center;
			font-size: 32rpx;
			position: fixed;
			bottom: 48rpx;
			left: 32rpx;
		}
	}
</style>